<template>
    <div class="history">
        <el-tag :effect="$route.path == item.path ? 'dark' : 'plain'" v-for="item, index in navHistory" :key="index"
            size="small" @click="$router.push(item.path)" :class="item.meta.icon">{{ item.meta.title }}</el-tag>
    </div>
</template>

<script>
export default {
    name: 'nav-history',
    computed: {
        navHistory() {
            return this.$store.state.menu.navHistory || []
        }
    }
}
</script>

<style scoped>
.history {
    height: 34px;
    line-height: 34px;
}

.history span {
    margin: 0 3px;
    cursor: pointer;
    border-radius: 0%;
    transition: all .3s cubic-bezier(.2, 1, .3, 1);
}

.history span:hover {
    padding: 0 20px;
    background-color: rgb(245, 223, 255);
    border-color: #b3d8ff;
    color: white;
}
</style>